Live Preview in VSCode

Posted on 2022-10-05 by

henrikvilhelmberglund

Live Preview in VSCode

(Warning: Tutorial 004 has a better workflow!)

(creates a local web server for showing HTML+CSS+JS in an embedded browser in VSCode instead of opening a separate browser window)
  1. In VSCode, find Extensions in the left panel and search for Live Preview
  2. Click Live Preview and Install
  3. Create a new file and save it as .html
  4. Copy paste the following and save 
<html>
    <head>
        <title>It works!</title>
    </head>
    <body>
        <h1>H1!</h1>
        <p>Hi, this is a paragraph.</p>
    </body>
</html>
  1. With the .html file active, in the top right click Show Preview
  2. An embedded browser is opened where the project HTML+CSS+JS is displayed
  3. Success! (the page updates in realtime)